<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>结构化数据</title>
    <script lanuage="javascript">
        window.onload=function (){
            document.getElementById("selectTableKey").addEventListener("change",
                function(){
                    var elementsByClassName = document.getElementsByClassName("tableKey");
                    var len = elementsByClassName.length;
                    for (let i = 0; i < len; i++) {
                        elementsByClassName.item(i).setAttribute("hidden","hidden");
                    }
                    var index = document.getElementById("selectTableKey").selectedIndex;
                    var tableKey = document.getElementById("selectTableKey").options[index].value;
                    document.getElementById(tableKey).removeAttribute("hidden");
                }
            );
        };
    </script>
</head>
<body>
<h2>结构化数据的入湖</h2>
<hr>
<div>
    当前选择的mysql数据库地址是：[[${session.jdbcUrl}]] &nbsp;&nbsp;&nbsp;
    <a th:href="@{/data_lake/data_source}"><input type="button" value="修改"></a>
</div>
<div>
    <label th:if="${#maps.isEmpty(tables)}">抱歉，该数据库中表的个数为0</label>
    <select name="" id="selectTableKey" th:unless="${#maps.isEmpty(tables)}">
        <option disabled selected value> -- select an option -- </option>
        <div th:each="tableKey : ${tables.keySet()}">
            <option th:value="${tableKey}">[[${tableKey}]]</option>
        </div>
    </select>
    <br>
    <!--<div th:each="tableKey : ${tableKeySet}">-->
    <div th:each="tableKey : ${tables.keySet()}">
        <form th:action="@{/data_lake/selection_hbase}" method="post"
              class="tableKey" th:id="${tableKey}" hidden="hidden">
            <input type="hidden" name="mysqlTableName" th:value="${tableKey}">
            <!--<div th:each="field : ${tables.get(tableKey)}">-->
            <div th:each="field : ${__${tableKey}__}">
                <input type="checkbox" name="fieldsName" th:value="${field.key}">
                [[${field.key}]]（[[${field.value}]]）
                <!--<span th:if="${field.value}=='INT'">-->
                <!--    请输入数值筛选条件：-->
                <!--    <input type="text">-->
                <!--</span>-->
            </div>
            <br><br><br>
            <input type="submit" value="下一步">
        </form>
    </div>
</div>
</body>
</html>